<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app" >
            <button @click="lang()">浪起来...</button>
            <button @click="stop()">别狼，猥琐</button>
            <br>
            {{msg}}

        </div>
        <!--导包一定要双标签，不能单标签-->
        <script src="./node_modules/vue/dist/vue.js"></script>

        <script type="text/javascript">

            var vue = new Vue({
                el:"#app",
                data:{
                    msg:"我好浪。。哈哈。。啊，弟弟救我",
                    a:null
                },


                methods:{
                    lang() {
                        //防止计时器点击一下加速一次
                        if(this.a){
                            return;
                        }
                         this.a=setInterval( () => {
                             //不用()=>{} 的话 this指的是window 不是指当前对象
                                var start=this.msg.substring(0,1);
                                var end=this.msg.substring(1);
                                this.msg=end+start;
                            },400)
                        },
                    stop() {
                        //去除计时器，并且重置
                        clearInterval(this.a);
                        this.a=null;
                    }







                    }


            })
        </script>
    </body>
</html>